<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>简单的图表</title>
	<!-- 引入 ECharts 文件，如果觉得它太大，就想办法编译，可以借助nodeJS -->
    <script src="../dist/echarts.js"></script>
    <!-- 随意引入一个主题文件，使用时在初始化的时放入这个文件名(去掉js后缀)就行了 -->
    <script src="../theme/macarons.js"></script>
    
</head>
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="nightingale" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'),'macarons');	//一个值是dom，俩是带主题的了【默认只有light和dark】
	var nightingale = echarts.init(document.getElementById('nightingale'));	//绘制一个南丁格尔图
	// nightingale.showLoading();		//异步加载的时候显示加载动画
	// 指定图表的配置项和数据
	var option = {
	    title: {
	        text: 'ECharts 入门示例'
	    },
	    tooltip: {},
	    legend: {
	        data:['销量']
	    },
	    xAxis: {
	        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	    },
	    yAxis: {},
	    series: [{
	        name: '销量',
	        type: 'bar',
	        data: [5, 20, 36, 10, 10, 20]
	    }]
	};
	//南丁格尔图
	var option2 = {
    	backgroundColor: '#2c343c',
    	visualMap: {
    	    show: false,
    	    min: 80,
    	    max: 600,
    	    inRange: {
    	        colorLightness: [0, 1]
    	    }
    	},
    	series : [
    	    {
    	        name: '访问来源',
    	        type: 'pie',
    	        radius: '55%',
    	        data:[
    	            {value:235, name:'视频广告'},
    	            {value:274, name:'联盟广告'},
    	            {value:310, name:'邮件营销'},
    	            {value:335, name:'直接访问'},
    	            {value:400, name:'搜索引擎'}
    	        ],
    	        roseType: 'angle',
    	        label: {
    	            normal: {
    	                textStyle: {
    	                    color: 'rgba(255, 255, 255, 0.3)'
    	                }
    	            }
    	        },
    	        labelLine: {
    	            normal: {
    	                lineStyle: {
    	                    color: 'rgba(255, 255, 255, 0.3)'
    	                }
    	            }
    	        },
    	        itemStyle: {
    	            normal: {
    	                color: '#c23531',
    	                shadowBlur: 200,
    	                shadowColor: 'rgba(0, 0, 0, 0.5)'
    	            }
    	        }
    	    }
    	]
	};
	// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    nightingale.setOption(option2);	//绘制南丁格尔
</script>
</body>
</html>